<template>
  <div class="app-container">
    <!-- :inline="true"表示行内表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <!-- v-model为什么绑定叫hosname和hoscode的属性，因为后端由@RequestBody修饰的实体类HospitalSetQueryVo正好就是这两个属性，名字必须和
          HospitalSetQueryVo的属性名保持一致，这样才能把前端传的数据绑定到HospitalSetQueryVo实体中 -->
        <el-input v-model="searchObj.cname" placeholder="竞赛名称" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()"
        >查询</el-button
      >
    </el-form>

    <!-- banner列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <!-- <el-table-column type="index" width="50"/> -->
      <el-table-column prop="id" label="竞赛编号" />
      <el-table-column prop="cname" label="竞赛名称" />
      <el-table-column prop="year" label="年度" width="200" />

      <!-- 操作栏 -->

      <!-- <el-table-column min-width="300px" label="竞赛新闻">
        <template slot-scope="scope">
          <template v-if="isEdit">
            <el-input v-model="scope.row.news" class="edit-input" size="small" type="textarea"
             :rows="3"/>
            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
          </template>
          <span v-else>{{ scope.row.news }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.status" type="success" size="small" icon="el-icon-circle-check-outline" @click="updateNews(scope.row.id,scope.row.news)">Ok</el-button>
          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="isEdit=!isEdit">修改新闻</el-button>
        </template>
      </el-table-column> -->

      <el-table-column min-width="300px" label="竞赛新闻">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.news" class="edit-input" size="small" type="textarea" :rows="3"/>
            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
          </template>
          <span v-else>{{ scope.row.news }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button v-if="scope.row.edit" type="success"  icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row,scope.row.id,scope.row.news)">OK</el-button>
          <el-button v-if="!scope.row.edit && scope.row.status" type="primary"  icon="el-icon-edit" circle @click="scope.row.edit = !scope.row.edit"></el-button>
          <el-button v-if="!scope.row.status" type="success"  icon="el-icon-s-promotion" circle @click="openAdd(scope.row.id)"></el-button>
          <el-button v-if="!scope.row.edit && scope.row.status"   type="danger" icon="el-icon-delete" circle @click="removeDataById(scope.row.id)"></el-button>

        </template>

       
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!--:current-page是当前页，改成current,前边有冒号，是v-bind，所以冒号里写js表达式  -->
    <!-- @current-change是element-ui的一个事件，切换分页的时候触发 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />


    <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="com" :rules="rules" ref="comForm">

        <el-form-item label="竞赛新闻" :label-width="formLabelWidth">
            <el-input v-model="com.news" autocomplete="off"/>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNews">确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
//前后端交互：在vue文件中导入hospitalset.js，这些js文件里写了和后端接口交互的函数，调用这些函数，就能实现前后端数据交互
//记住：前后端交互是靠写的js文件里的函数，而跟router/index.js里配的路由没一点关系，路由只负责前端点哪个按钮跳到哪个组件而已
import admin from "@/api/admin";
export default {
  data() {
    return {
      formLabelWidth: '130px',
      current: 1, //当前页
      limit: 5, //每页显示记录数
      searchObj: {}, //条件封装对象
      list: [], //当前页的数据集合
      total: 0, //总记录数
      com: {},
      title:'',
      dialogFormVisible:false
    };
  },
  created() {
    //获取数据
    this.fetchData();
  },

  //带分页
  methods: {
    openAdd(id){
      this.title='发布新闻';
      this.dialogFormVisible=true
      this.com.id=id
    },
    //清空表单
    clearForm(){
      //清空表单数据
      this.com={}//当你在对话框输入内容后this.com就不是空了，当关闭对话框后要重新初始化

      //清空表单的校验结果
      // 通过this.$refs可以引用一个表单，有两种写法，this.$refs.comForm和this.$refs['comForm']都可以，然后clearValidate()函数就是清空校验结果  
      this.$refs.comForm.clearValidate();
    },
    confirmEdit(row,id,news) {
      //this.isEdit=false
      row.edit = false;

      this.com.id = id;
      this.com.news = news;
      admin.updatedNews(this.com).then((response) => {
        //提示
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.com={}
        //跳转列表页面 使用路由跳转方式实现
        this.fetchData();
      });
    },
    cancelEdit(row) {
      //this.isEdit=false
      row.edit = false;
    },
    fetchData(current = 1) {
      //上边created钩子调fetchData函数如果没有传参数就默认current为1,若传了2，那就是this.curremt=2,1就没用了
      this.current = current;
      admin.getPageList(this.current, this.limit, this.searchObj).then((response) => {
          //Response：被axios响应拦截器处理后的结果，是Result对象,并不是原始的response，而是原始的response中的data，即Result对象
          //console.log(response);
          // response.data是Result对象的data属性，这个data是后端自己定义的，它就是Page对象

          const items = response.data.records;
          this.list = items.map((v) => {
            this.$set(v, "edit", false); // https://vuejs.org/v2/guide/reactivity.html
            return v;
          });

          //this.list=response.data.records;//records是IPage里的
          this.total = response.data.total;
          console.log(response);
          console.log(this.list);
        });
    },

    //删除新闻
    removeDataById(id) {
      this.com.id=id
      this.com.news=''
      this.com.status=0
      this.$confirm("此操作将删除新闻信息,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //确定后执行then方法
        admin.deleteNews(this.com).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          //刷新页面(再次调用查询列表带分页的接口)
          this.fetchData();
        });
      });
    },

    //发布新闻
    addNews(){
      admin.addNews(this.com).then(response=>{
                //提示
                this.$message({
                    type:'success',
                    message:'发布成功'
                })
                //关闭对话框
                this.dialogFormVisible=false
                //跳转列表页面 使用路由跳转方式实现
                this.fetchData();
            }) 
    }
  },
};
</script>
  
  <style>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.el-dialog .el-input{
    width: 85%;
  }
</style>